<template>
  <div class="details_tag2">
    <van-tab title="目录">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="标题1" name="1">
          <div class="course_list">
            <van-tag plain type="primary" color="#666">PDF</van-tag>
            <span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴巴拉巴拉巴拉巴拉</span>
            <span class="flr">可试看</span>
          </div>
          <div class="course_list">
            <van-tag class="c1" plain type="primary" color="#666">视频</van-tag>
            <span>巴拉巴拉巴拉巴拉巴拉</span>
            <span class="flr"><van-icon name="lock" /></span>
          </div>
        </van-collapse-item>
        <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
        <van-collapse-item title="标题3" name="3">内容</van-collapse-item>
      </van-collapse>
    </van-tab>
  </div>
</template>

<script>
export default {
    data(){
        return{
        activeNames: ["1"],
        }
    }
};
</script>

<style lang='scss'>
.details_tag2{
      .van-collapse-item__content {
    line-height: 16px;
  }
  .course_list {
    display: flex;
    margin-top: 10px;
    span:nth-of-type(1) {
      margin-right: 8px;
      max-height: 16px;
    }
    span:nth-of-type(2) {
      flex: 1;
      margin-right: 8px;
    }
    span:last-child {
      width: 45px;
      margin-right: 8px;
      text-align: center;
    }
  }
}
</style>
